<script setup>
import { ref, onMounted, toRefs } from 'vue'
import { objextend } from '@/js/function.js'
import { config_default } from './config.js'

import { store } from '@/js/store.js'
import modeUpimg from '@/components/mode-upimg.vue';
import myselect from '../select.vue'

const props = defineProps({
    config: Object,
    active: String,
});
//需要响应式时使用toRefs
const { config } = toRefs(props);


const mergedObj = objextend(config_default(), config.value)
objextend(config.value, mergedObj)

function onAddimg() {
    config.value.list.push({ url: 'images/icon-pic.svg', link: '', name: '图片' })
}


const dialog = ref(false)
const editlink = ref({})
function onTitle(row) {
    editlink.value = row
    dialog.value = true;
}

</script>

<template>

    <el-form :model="config">
        <h1>修改：<input type="text" v-model="config.title" style="border-width: 0 0 1px 0;"></h1>
        <el-form-item label="图片">
            <mode-upimg :uplist="config.list" :action="store.api + store.uploadUrl" :options="{width: 300, height: 60, other:true, upDisable: true, ...store.upimgOptions}">
                <template #default="{ evItem }">
                    <div class="btn" @click="onTitle(evItem)">名称</div>
                    <myselect :config="evItem" />
                </template>
                <template v-if="store.upimgOptions.online" v-slot:filepopup="modeParams">
                    <material :modeParams="modeParams" :xuanze="true" />
                </template>
            </mode-upimg>
            <el-button type="primary" @click="onAddimg">新增图片</el-button>
        </el-form-item>
        <el-form-item label="宽度">
            <el-input type="number" v-model="config.width" :disabled="config.width_unit=='auto'" title="auto自适应可无需设置数值">
                <template #append>
                    <el-select v-model="config.width_unit" placeholder="单位" style="width: 80px">
                        <el-option label="px" value="px" />
                        <el-option label="%" value="%" />
                        <el-option label="auto" value="auto" />
                    </el-select>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item label="高度">
            <el-input type="number" v-model="config.height" :disabled="config.height_unit=='auto'" title="auto自适应可无需设置数值">
                <template #append>
                    <el-select v-model="config.height_unit" placeholder="单位" style="width: 80px">
                        <el-option label="px" value="px" />
                        <el-option label="auto" value="auto" />
                    </el-select>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item label="间距">
            <p style="width: 96%;">上下：<el-slider v-model="config.margin1" :max="150" /></p>
            <p style="width: 96%;">左右：<el-slider v-model="config.margin2" :max="150" /></p>
        </el-form-item>
        <el-form-item label="圆角">
            <el-slider v-model="config.borderRadius" :max="200" />
        </el-form-item>
        <el-form-item label="字号">
            <el-input-number type="number" :min="0" v-model="config.fontSize"></el-input-number>
        </el-form-item>
        <el-form-item label="字颜色">
            <el-color-picker v-model="config.color" />
        </el-form-item>
        <el-form-item label="空链接提示">
            <el-input type="text" v-model="config.linknull" />
        </el-form-item>
        <!-- <el-form-item label="自定义项">
            <el-input type="text" v-model="config.define" />
        </el-form-item> -->
        <el-form-item label="备注">
            <el-input type="text" v-model="config.note" />
        </el-form-item>


        <!-- 配置弹窗 链接 -->
        <el-dialog v-model="dialog" title="配置名称">
            <el-input type="text" v-model="editlink.name" placeholder="标题">
                <template #prepend>标 题</template>
            </el-input>
            <template #footer>
                <el-button type="primary" @click="dialog = false">确定</el-button>
            </template>
        </el-dialog>
    </el-form>


</template>

<style scoped></style>